<template>
	<view class="page-content">
		<view style="padding: 0 32rpx;height: 100%;overflow-y: auto">
			<view class="content-box">
				<view class="notice-box">
					<u-notice-bar mode="horizontal" :list="list" color="#000000" bg-color="rgba(255,214,0,0.25)" border-radius="4"
						:volume-icon="false" font-size="20"></u-notice-bar>
				</view>
				<form-item-title text="宠物信息"></form-item-title>
				<view class="form-box">
					<u-form :label-style="labelStyle">
						<view style="display: flex;justify-content: space-around;">
							<u-upload ref="zmref" :header="header" :action="action" max-count="1" upload-text="正面"
								@on-success="successZM" @on-remove="removeZM" height="136" width="136"></u-upload>
							<u-upload ref="zcref" :header="header" :action="action" max-count="1" upload-text="左侧"
								@on-success="successZC" @on-remove="removeZC" height="136" width="136"></u-upload>
							<u-upload ref="ycref" :header="header" :action="action" max-count="1" upload-text="右侧"
								@on-success="successYC" @on-remove="removeYC" height="136" width="136"></u-upload>
						</view>
						<u-form-item label="宠物名"><u-input input-align="right" v-model="formdata.name" /></u-form-item>
						<u-form-item label="品种"><u-input input-align="right" v-model="formdata.breed" /></u-form-item>
						<u-form-item label="性别"><u-input input-align="right" v-model="sexlabel" disabled
								@click="showSex=true" /></u-form-item>
						<u-form-item label="年龄"><u-input type="number" input-align="right" v-model="formdata.age"
								@click="selectageshow=true" placeholder="请选择" disabled /></u-form-item>
						<u-form-item label="颜色"><u-input input-align="right" v-model="formdata.colour" /></u-form-item>
						<u-form-item label="体重"><u-input input-align="right" v-model="formdata.weight" /></u-form-item>
						<u-form-item label="疫苗接种信息"><u-switch slot="right" active-color="#FCD610"
								v-model="formdata.ifVaccination"></u-switch></u-form-item>
					</u-form>
				</view>
			</view>
			<form-item-title text="挂失信息"></form-item-title>
			<view class="content-box">
				<view class="form-box">
					<u-form :label-style="labelStyle">
						<u-form-item label="丢失地点"><u-input input-align="right" v-model="formdata.lossAddress" disabled
								@click="getMapLocation" /></u-form-item>
						<u-form-item label="悬赏金额"><u-input input-align="right" type="digit"
								v-model="formdata.rewardAmount" /></u-form-item>
					</u-form>
				</view>
			</view>
			<view class="content-box">
				<view class="form-box">
					<u-form-item label="宠物特征" :label-style="labelStyle" label-position="top">
						<u-input type="textarea" v-model="formdata.feature" />
					</u-form-item>
				</view>
			</view>
			<view class="flex-col justify-center items-center">
				<view class="publish-btn" @tap="handleSubmit">
					立即发布
				</view>
			</view>
		</view>
		<u-select v-model="showSex" mode="single-column" :list="sexlist" @confirm="handlesexconfirm"></u-select>
		<u-select v-model="selectageshow" mode="mutil-column" :list="agelist" @confirm="ageconfirm"></u-select>
	</view>
</template>

<script>
	import formItemTitle from "components/index/form-item-title.vue";
	import utils from "../../../utils/util.js";
	import reportLoss from "../../../api/reportLoss.js";
	export default {
		data() {
			return {
				list: [
					'温馨提示：感谢您使用宠行宝•宠物巴士服务，平台提供信息共享服务，请您保护好自己的财产安全，期间的财物及人身安全责任需自行承担。'
				],
				action: this.$config.mobeilURL + "/common/uploadFile", // 演示地址
				labelStyle: {
					fontWeight: "bold",
					fontSize: "28rpx",
					whiteSpace: "nowrap"
				},
				zmList: [],
				zcList: [],
				ycList: [],
				formdata: {
					name: "",
					age: "",
					breed: "",
					certificateId: 0,
					colour: "",
					feature: "",
					frontalView: "",
					ifVaccination: false,
					lat: 0,
					leftSideView: "",
					lng: 0,
					lossAddress: "",
					remark: "",
					rewardAmount: "",
					rightSideView: "",
					sex: "",
					weight: "",
				},
				showSex: false,
				sexlist: [{
						value: 0,
						label: '公'
					},
					{
						value: 1,
						label: '母'
					}
				],
				sexlabel: '',
				header: {
					"content-type": "multipart/form-data",
					"Authorization": uni.getStorageSync('cxbtoken')
				},
				selectageshow: false,
				agelist: [
					[],
					[{
						value: '年',
						label: '年'
					}],
					[],
					[{
						value: '月',
						label: '月'
					}],
				]
			}
		},
		onLoad() {
			for (let i = 0; i <= 100; i++) {
				this.agelist[0].push({
					value: i,
					label: i
				})
			}
			for (let i = 0; i < 12; i++) {
				this.agelist[2].push({
					value: i,
					label: i
				})
			}
		},
		methods: {
			handlesexconfirm(val) {
				this.formdata.sex = val[0].value;
				this.sexlabel = val[0].label;
			},
			//定位选择详细地址
			getMapLocation() {
				utils.chooseLocationInfo().then((res) => {
					this.formdata.lat = res.longitude;
					this.formdata.lng = res.latitude;
					this.formdata.lossAddress = res.name;
				});
			},
			successZM(data, index) {
				if (data.code !== 200) {
					this.$refs.zmref.lists[index].error = true;
				} else {
					this.zmList.push(data.accessPath);
					this.formdata.frontalView = data.accessPath;
				}
			},
			removeZM(index) {
				this.zmList.splice(index, 1);
				this.formdata.frontalView = '';
			},
			successZC(data, index) {
				if (data.code !== 200) {
					this.$refs.zcref.lists[index].error = true;
				} else {
					this.zcList.push(data.accessPath);
					this.formdata.leftSideView = data.accessPath;
				}
			},
			removeZC(index) {
				this.zcList.splice(index, 1);
				this.formdata.leftSideView = "";
			},
			successYC(data, index) {
				if (data.code !== 200) {
					this.$refs.ycref.lists[index].error = true;
				} else {
					this.ycList.push(data.accessPath);
					this.formdata.rightSideView = data.accessPath;
				}
			},
			removeYC(index) {
				this.ycList.splice(index, 1);
				this.formdata.rightSideView = "";
			},
			handleSubmit() {
				utils.checkSubscribe(['u_VNnPGBVPcUmutE_sdT3TJpd0FglGMsUs_-pGOZupY']).then(res => {
					this.formdata.lng = `${this.formdata.lng}`;
					this.formdata.lat = `${this.formdata.lat}`;
					uni.showLoading({
						title: '发布中'
					})
					reportLoss
						.addPetLossOffer(this.formdata)
						.then((res) => {
							uni.hideLoading();
							if (res.code === 200) {
								uni.showToast({
									title: '发布成功',
									icon: "none"
								})
								setTimeout(() => uni.navigateBack(), 1000)
							} else {
								throw Error();
							}
						})
						.catch((err) => {
							uni.hideLoading();
							uni.showToast({
								title: '发布失败',
								icon: "error"
							})
						});
				});
			},
			ageconfirm(e) {
				let strage = '';
				if (e[0].value != 0)
					strage = strage + e[0].value + e[1].value
				if (e[2].value != 0)
					strage = strage + e[2].value + '个' + e[3].value
				this.formdata.age = strage
			}
		},
		components: {
			formItemTitle
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100%;
		background: linear-gradient(180deg, #FCD610 0%, #F6F6F6 40%, #F6F6F6 100%);
		overflow-y: auto;

		.content-box {
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.notice-box {
				padding: 24rpx;
			}

			.form-box {
				padding: 0 32rpx 32rpx 32rpx;
				margin-bottom: 40rpx;

				.form-item {
					margin-top: 24rpx;

					.ml-9 {
						margin-left: 18rpx;
					}

				}

				.group_6 {
					padding: 32rpx 0;
					border-bottom: solid 2rpx #f3f3f3;

					.font_3 {
						font-size: 28rpx;
						font-family: PingFang SC;
						line-height: 25.76rpx;
						font-weight: 700;
						color: #000000;
					}

					.text_7 {
						line-height: 26.02rpx;
					}

					.image-wrapper {
						background-color: #ececec;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100rpx;
						height: 100rpx;
						font-size: 30px;
						color: #999999
					}
				}
			}
		}

		.publish-btn {
			width: 100%;
			padding: 40rpx 0;
			background-color: #fbd610;
			border-radius: 68rpx;
			font-size: 32rpx;
			text-align: center;
			font-weight: 700;
			margin-bottom: 24rpx;
		}
	}
</style>